<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>会员管理系统</title>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%> 
<c:set var="ctx" value="<%=basePath%>" scope="page"/>
<link rel="stylesheet" type="text/css" href="${ctx }/js/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="${ctx }/js/easyui/themes/icon.css" />
<script type="text/javascript" src="${ctx }/js/easyui/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="${ctx }/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx }/js/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${ctx }/js/common.js?v=1"></script>
<script type="text/javascript" src="${ctx }/js/user/userInfo.js?v=4"></script>
<script type="text/javascript" src="${ctx }/js/datagrid-detailview.js"></script>
</head>
<body>
	<div>
		<div id="userList"></div>
	</div>
	<!--新增，修改窗口 -->
	<div id="userInfo"></div>
<script type="text/javascript">
var editRow = undefined;   //行索引
var curExpandRow;
$(function(){ 
	$('#userList').datagrid({
		title:'会员列表',
        url:'${pageContext.request.contextPath}/user/selectList.do',
        method : 'get',      //默认post
        idField : 'id',
        columns:col,
        toolbar:toolbar,
        pagination:true,	//显示分页
        pageSize:5,
        pageList:[2,5,10],
        rownumbers:true,
        //singleSelect:true,
        collapsible:true,
        //行上编辑用下面的
       	onAfterEdit: function (rowIndex, rowData, changes) {
            editRow = undefined;
        }, 
        onDblClickRow: function (rowIndex, rowData) {
            if (editRow != undefined) {
                $("#userList").datagrid('endEdit', editRow);
            }
 
            if (editRow == undefined) {
                $("#userList").datagrid('beginEdit', rowIndex);
                editRow = rowIndex;
            }
        },
        onClickRow: function (rowIndex, rowData) {
            if (editRow != undefined) {
                $("#userList").datagrid('endEdit', editRow);
 
            }
        },
        //展开收起用下面的
        onLoadSuccess:function(){
	        $("#userList").datagrid('resize', {  
	            height : "310px" 
	        });
         },
        view: detailview,
        detailFormatter:function(index, row){
        	return '<div id="ddv-' + index + '" style="padding:5px 0"></div>';
		},
        onExpandRow: function(index, row){
        	if(undefined != curExpandRow && index != curExpandRow){
        		hiddenSubTest(curExpandRow);
       	 	}
       	 	curExpandRow = index;
        	$('#ddv-'+index).panel({
				border:false,
				cache:false,
				href:'${pageContext.request.contextPath}/user/toDetailView.do?id='+row.id,
				onLoad:function(){
					$('#userList').datagrid('fixDetailRowHeight',index);
				}
			});
			$('#userList').datagrid('fixDetailRowHeight',index);
        }	
    });
});

var sexData=[{'id':'1','text':'男'},{'id':'2','text':'女'}];
var col = [[
        	{field:'ck',checkbox:true},
        	{field:'id',title:'ID',width:60,halign:'center'},
        	{field:'name',title:'姓名',width:100,halign:'center'},
        	{field:'age',title:'年龄',width:100,halign:'center'},
        	{field:'sex',title:'性别',width:80,halign:'center',formatter:formatSet,
        		editor :{
        			type : 'combobox',
        			options : {
        				valueField : 'id',
        				textField : 'text',
        				data : sexData,
        				required:true,
        				onSelect : function (record){
        					var rows = $('#userList').datagrid('getRows');
        					var param = new Object();
        					var userId = rows[editRow].id;  //选中行的id
        					var sexId = record.id;  //所选的性别id
        					param.id = userId;
        					param.sex = sexId;
        					var jsonStr = JSON.stringify(param);
        					$.ajax({
							       url: '${pageContext.request.contextPath}/user/update.do',
							       type: "post",
							       dataType: "json",
							       data:{'str':jsonStr,},
							       //后台用对象接收的，是下面两种方式传值
							       //data:$.param(param),
							       //data:JSON.parse(JSON.stringify(param)),
							       success: function (data) {
							    	   $.messager.show({
					                       title: '提示',
					                       msg: data.msg,
					                       showType: 'show',
					                   });
								       if(data.code=='1000'){
									       $('#userList').datagrid("reload");
									       $('#userList').datagrid("unselectAll");  //取消选中的行
									       editRow = undefined;
								       }
							       }
						    });
						}
        			}
        		}
        	},
        	{field:'birthday',title:'出生日期',width:80,halign:'center',formatter:formatBirthday},
        	{field:'createDateTime',title:'创建日期',width:130,halign:'center',formatter:formatDate},
        	{field:'modifyDateTime',title:'更新日期',width:130,halign:'center',formatter:formatDate},
        	{field: 'opt', title: "操作", width: "200",align: 'center',
        		formatter : function(value, row, index) {
        			var view = "<a id='showSub_" + index + "' href='javascript:showSubTest("+ index + ")'>展开</a>"
        					 + "<a id='hiddenSub_" + index + "' href='javascript:hiddenSubTest(" + index + ")' style='display:none;' >收起</a>";
        			return view;
        		},
            },
        	
]];

function formatDate(val,row){
	if(val != null && val !=""){
		var now = new Date(val);
		return now.format("yyyy-MM-dd hh:mm:ss");
	}
}
function formatBirthday(val,row){
	if(val != null && val !=""){
		var now = new Date(val);
		return now.format("yyyy-MM-dd");
	}
}
function formatSet(val,row){
	if(val == 1){
		return "男";
	}else if(val == 2){
		return "女";
	}else{
		return "未知";
	}
}
function getSelectionsIds(){
	var userList = $("#userList");
	var sels = userList.datagrid("getSelections");
	var ids = [];
	for(var i in sels){
		ids.push(sels[i].id);
	}
	ids = ids.join(",");
	return ids;
}
var toolbar = [{
    text:'新增',
    iconCls:'icon-add',
    handler:function(){ 
    	$('#userInfo').window({
    		title:'新增会员',
    		iconCls:'icon-save',
    		href:'${pageContext.request.contextPath}/user/toUserInfoPage.do?flag=add',
    		modal:true,
    		width:800,
    		height:600,
    		left:400,
            top:100,
    	});
    }
},{
    text:'编辑',
    iconCls:'icon-edit',
    handler:function(){
    	var ids = getSelectionsIds();
    	if(ids.length == 0){
    		$.messager.alert('提示','未选中用户!');
    		return ;
    	}else if(ids.indexOf(',') > 0){
    		$.messager.alert('提示','请选择一条数据进行修改!');
    		return ;
    	}
    	var row = $('#userList').datagrid('getSelected');
    	var id = row.id;
    	$('#userInfo').window({
    		title:'修改会员',
    		iconCls:'icon-edit',
    		href:'${pageContext.request.contextPath}/user/toUserInfoPage.do?flag=update&&id='+id,
    		modal:true,
    		width:800,
    		height:600,
    		left:400,
            top:100,
    	});
    }
},{
    text:'删除',
    iconCls:'icon-cancel',
    handler:function(){
    	var ids = getSelectionsIds();
    	if(ids.length == 0){
    		$.messager.alert('提示','未选中用户!');
    		return ;
    	}
    	$.messager.confirm('确认','确定删除ID为 '+ids+' 的会员吗？',function(r){
    	    if (r){
            	$.post("${pageContext.request.contextPath}/user/delete.do",{'ids':ids}, function(data){
        			if(data.code == '1000'){
        				$.messager.alert('提示','删除会员成功!',undefined,function(){
        					$("#userList").datagrid("reload");
        					$("#userList").datagrid("clearSelections");
        				});
        			}else{
        				$.messager.alert('提示','删除会员失败!');
        			}
        		});
    	    }
    	});
    }
},'-',{
    text:'导出',
    iconCls:'icon-remove',
    handler:function(){
    	var optins = $("#userList").datagrid("getPager").data("pagination").options;
    	var page = optins.pageNumber;
    	var rows = optins.pageSize;
    	var f = $('<form action="${pageContext.request.contextPath}/user/export.do" method="post" id="fm1"></form>'); 
    	var i = $('<input type="hidden" name="page" />');
    	i.val(page);
    	i.appendTo(f); 
    	var m = $('<input type="hidden" name="rows" />');
    	m.val(rows);
    	m.appendTo(f); 
    	f.appendTo(document.body).submit();
    }
}];

</script>
</body>
</html>